"use client"

import Image from "next/image"
import Link from "next/link"

import { useConfigStore } from "@/stores"
import { EditGridItem } from "@/components/edit-grid-item"

// 分类描述配置 - SEO优化
const categoryDescriptions: Record<string, string> = {
  'AI': '汇集最新的人工智能工具和平台，包括ChatGPT、Claude等AI助手，以及AI绘画、AI写作等创新应用，助力提升工作效率',
  '搜索引擎': '精选全球主流搜索引擎，包括百度、Google、必应等，满足不同需求的信息检索和资料查找',
  '社交': '汇总主流社交媒体平台，涵盖微博、豆瓣、贴吧等国内外知名社交网站，连接世界，分享生活',
  '知识学习': '专业的学习资源平台，包括在线课程、学术搜索、技能培训等，打造全方位的知识获取渠道',
  '影音娱乐': '丰富的视频音频平台，包括哔哩哔哩、优酷、音乐网站等，享受高质量的娱乐内容',
  '生活服务': '实用的日常生活工具，涵盖出行、购物、美食等各个方面，让生活更加便捷高效',
  '设计资源': '专业的设计工具和素材平台，为设计师和创作者提供灵感来源和制作工具',
  '开发工具': '程序员必备的开发工具和技术资源，包括代码托管、技术文档、开发框架等'
}

export function LinkContent() {
  const { categories, activeTab } = useConfigStore()

  return (
    <>
      {categories.map((category, index) => (
        <div 
          key={index}
          data-tab={`tab${index}`}
          className={`tab-panel ${activeTab === index ? 'active' : 'hidden'}`}
        >
          {/* SEO分类描述 - 新增，不影响现有布局 */}
          {categoryDescriptions[category.title] && (
            <div className="category-seo-description">
              <h2 className="category-title">{category.title}</h2>
              <p className="category-description">
                {categoryDescriptions[category.title]}
              </p>
            </div>
          )}
          
          {/* 网格布局 - 替换lyimg布局 */}
          <div className="grid-container">
            {category.items.map((item, itemIndex) => (
              <div key={itemIndex} className="grid-item">
                <a href={item.link} target="_blank" rel="noopener noreferrer">
                  <img 
                    src={item.icon} 
                    className="grid-icon" 
                    alt={`${item.title} - ${item.desc || category.title + '工具'}`}
                    loading="lazy"
                    title={`访问${item.title}${item.desc ? ' - ' + item.desc : ''}`}
                  />
                  <div className="grid-title">{item.title}</div>
                </a>
              </div>
            ))}
            {/* 编辑按钮 */}
            <EditGridItem />
          </div>
        </div>
      ))}
    </>
  )
}
